<template>
<div>
  <!-- 显示营业厅信息 -->
  <div>
     {{yyt.dname}} >> {{yyt.yname}} {{yyt.yid}}
  </div>
  <!-- 礼品展示表格 -->
  <div>
     <el-table
    :data="lpInfo.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="奖品等级"
      prop="levelName">
    </el-table-column>
    <el-table-column
      label="奖品名称"
      prop="lpName">
    </el-table-column>
    <el-table-column
      label="剩余数量"
      prop="number">
    </el-table-column>
     <el-table-column
      label="已领取数量"
      prop="ynumber">
    </el-table-column>
  </el-table>
  </div>
  <!-- Table -->
  <el-row>
      <el-button type="primary" @click="alertLp(1)">一等奖 配置</el-button>
      <el-button type="success" @click="alertLp(2)">二等奖 配置 </el-button>
      <el-button type="danger"  @click="alertLp(3)">三等奖 配置</el-button>
      <el-button type="warning" @click="alertLp(4)">四等奖 配置</el-button>
      <el-button type="primary" @click="alertLp(5)">五等奖 配置</el-button>
  </el-row>
<el-dialog title="选择礼品" :visible.sync="dialogTableVisible">

  <div>
      <el-select v-model="map.codeType" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.codeName"
          :value="item.value">
          <span style="float: left">{{ item.codeName }}</span>
        </el-option>
      </el-select>

     <el-button type="primary" icon="el-icon-search" @click="select()">搜索</el-button>
  </div>
  <el-table :data="levelLpList">
     <el-table-column property="giftname" label="礼品名称" width="150"></el-table-column>
      <el-table-column property="typeName" label="类型" width="200"></el-table-column>
     <el-table-column property="number" label="库存数量" width="200"></el-table-column>
     <el-table-column property="ynumber" label="已领取数量"></el-table-column>
     <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
           <!-- <el-button type="text" size="mini" icon="el-icon-edit"></el-button>          -->
          <el-input v-model="scope.row.xnumber" placeholder="请输入新增数量"></el-input>
        </template>       
     </el-table-column>
  </el-table>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogTableVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateAll()">确 定</el-button>
  </div>
</el-dialog>
 <div>
    
<el-dialog title="配置礼品数量" :visible.sync="config">
  <el-form :model="lp">
    <el-form-item label="礼品名称" :label-width="formLabelWidth">
      <el-input v-model="lp.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="库存数量">
    <el-input v-model="lp.number"></el-input>
  </el-form-item>
  <el-form-item label="领取数量">
    <el-input v-model="lp.ynumber"></el-input>
  </el-form-item>

  </el-form>
  
</el-dialog>


  </div>
</div>
</template>
<script>
//引入api接口
import ggkConfig from "@/api/ggkConfig";

export default {
    data() {
      return {
        config:false,
        map:{
            yytId:'',
             id:'',
             typeCode:''
            },
        options:[],
        levelLpList: [],
        dialogTableVisible: false,
        config: false,
        formLabelWidth: '120px',
        index:'',
        search: '',
        yyt:{
          yid:'',
          dname:'',
          yname:''
        },
        lpInfo:[],
        lp:{
          name:"",
          number:"",
          type:"",
          ynumber:''
        }
      }
    },
    created(){
        let id=this.$route.params.id
        this.getYyeInfo(id)
        this.getJpInfo(id)
        this.getlpType()
    },
    methods:{
      //获取营业厅信息
      getYyeInfo(code){
          ggkConfig.getYytById(code).then(res =>{
              this.yyt=res.data
          })
      },
      //获取礼品库存信息
      getJpInfo(code){
          ggkConfig.getStockById(code).then(res =>{
              this.lpInfo=res.data
       })
      },
      //获取礼品信息
      getlevelLpInfo(id){
          ggkConfig.getLevelById(id).then(res =>{
            this.levelLpList=res.data
          })
      },
      alertLp(id){
          this.map.yytId=this.yyt.yid
          this.map.id=id
          this.map.typeCode=''
          this.dialogTableVisible=true;
           this.levelLpList=[]
          ggkConfig.getLevelById(this.map).then(res =>{
            console.log(res)
            this.levelLpList=res.data
          })
      },
      select(){
        this.levelLpList=[]
        ggkConfig.getLevelById(this.map).then(res =>{
            this.levelLpList=res.data
            console.log(res.data)
          })
      },
      getlpType(){
        ggkConfig.getJpType().then(res =>{
          this.options=res.data
          console.log(res.data)
        })
      },
      updateAll(){

         this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        })
        
        this.dialogTableVisible = false
        
        ggkConfig.updateGgkConfig(this.levelLpList)
        this.config = false
        .then(res =>{
         this.levelLpList(this.yyt.yid)
          this.getJpInfo(id)
        })
      }
    }
  }
</script>